<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="redis" uri="http://www.shopjsp.com/redisTag/functions" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<c:set var="basePath" value="${redis:getSysConfig('base_path_back')}"/>
<c:set var="uploadPath" value="${redis:getSysConfig('uploadFileVisitRoot')}"/>
<script type="text/javascript">
    /**
     * 自定义验证规则
     */
    function validateForm(){
        form.bootstrapValidator({
            message: "无效的值",
            feedbackIcons: {
                valid: "glyphicon glyphicon-ok",
                invalid: "glyphicon glyphicon-remove",
                validating: "glyphicon glyphicon-refresh"
            },
            fields: {
                videoInfo_1: {
                    validators: {
                        notEmpty: {message: "请上传视频"},
                        file:{maxSize: 1024*1024*50, message: '请上传一个最大不超过50M的mp4或flv视频文件'}
                    }
                },
                videoTitle: {
                    validators: {
                        notEmpty: {message: "视频标题不可为空"},
                        stringLength: {max: 30, message: "视频标题最大长度为30"}
                    }
                },
                videoDescription: {
                    validators: {
                        stringLength: {max: 2000, message: "视频描述最大长度为2000"}
                    }
                },
                remark: {
                    validators: {
                    	stringLength: {max: 500, message: "备注最大长度为500"}
                	}
                }
            }
        });
    }

    /**
     * 添加视频素材信息
     */
	<shiro:hasPermission name="back_gotoMaterialVideoPage_add">
    function addInfo(){
        $("#myModalLabel").empty().text("添加视频素材信息");
        /**清空隐藏域的值**/
        $("#materialVideoInfoId").val("");
        $("#publicNumberId").val("");
        $("#videoUrl_1").val("");
        $("#createTime").val("");
        $("#lastUpdateDate").val("");
        $("#videoMediaIdCreatedTime").val("");
        $("#creater").val("");
        $("#deletedBy").val("");
        $("#videoMediaId").val("");
        $("#videoFormatEnumId").val("");
        $("#videoSize").val("");
        $("#infoSendFlag").val("");
        $("#modifier").val("");
        $("#deletedFlag").val("");
        $("#videoName").val("");
        resetAddForm();
        /**如果有上传图片功能添加此代码，否则可以去掉**/
        initVideoForAdd(1,"sys_wx","video_material",1);
    }
	</shiro:hasPermission>

    /**
     * 编辑视频素材信息
     */
	<shiro:hasPermission name="back_gotoMaterialVideoPage_update">
    function editInfo(){
        $("#myModalLabel").empty().text("修改视频素材信息");
        /**获取选中行的id**/
        var selectedRow= $("#tt").bootstrapTable('getSelections');
        if(selectedRow.length==1){
            var id=selectedRow[0].materialVideoInfoId;
            $("#btn_edit").attr("data-target","#addOrEditModal");/**选中了记录后才可打开对应的模态框**/
            $.ajax({
                type: "POST",
                dataType: "JSON",
                url: "${basePath}/back/wx/material/video/getWxMaterialVideoInfoObject.sjson",
                data: {materialVideoInfoId:id},
                success: function(result){
                    var data = JSON.parse(result.data);
                    var wxMaterialVideoInfo = data.wxMaterialVideoInfo;
                    /**隐藏域**/
                    $("#videoUrl_1").val(wxMaterialVideoInfo.videoUrl);
                    $("#materialVideoInfoId").val(wxMaterialVideoInfo.materialVideoInfoId);
                    $("#publicNumberId").val(wxMaterialVideoInfo.publicNumberId);
                    $("#creater").val(wxMaterialVideoInfo.creater);
                    $("#videoMediaId").val(wxMaterialVideoInfo.videoMediaId);
                    $("#videoFormatEnumId").val(wxMaterialVideoInfo.videoFormatEnumId);
                    $("#videoSize").val(wxMaterialVideoInfo.videoSize);
                    $("#infoSendFlag").val(wxMaterialVideoInfo.infoSendFlag);
                    $("#modifier").val(wxMaterialVideoInfo.modifier);
                    $("#deletedFlag").val(wxMaterialVideoInfo.deletedFlag);
                    $("#videoName").val(wxMaterialVideoInfo.videoName);
                    $("#createTime").val(new Date(wxMaterialVideoInfo.createTime).Format("yyyy-MM-dd hh:mm:ss"));
                    $("#lastUpdateDate").val(new Date(wxMaterialVideoInfo.lastUpdateDate).Format("yyyy-MM-dd hh:mm:ss"));
                    /**可见表单控件**/
                    $("#videoTitle").val(wxMaterialVideoInfo.videoTitle);
                    $("#videoDescription").val(wxMaterialVideoInfo.videoDescription);
                    $("#remark").val(wxMaterialVideoInfo.remark);
                    /**回写预览上传文件所需的信息，如果有上传图片功能添加此代码，否则可以去掉**/
                    initVideoForUpdate(1,"sys_wx","video_material",1,"${uploadPath}",wxMaterialVideoInfo.videoUrl);
                    reValidateForm();
                    removeValidateField('videoInfo_1');
                }
            });
        }else{
            $("#btn_edit").attr("data-target", "");/**没有选中记录不可打开模态框**/
            showMsg("请选择一行记录！");
        }
    }
	</shiro:hasPermission>

    /**
     * 添加视频：上传视频文件
     */
    function  initVideoForAdd(uploadIndex,subSysFolderName,videoInfoPath,maxFileCount){
        $(".container").css("padding","0px 0px 0px 0px").css("width","auto");
        $(".file-drop-zone").css("height","100px");
        $("#fileWrap"+uploadIndex).empty().html("<input id='videoFile_"+uploadIndex+"'  class='file input-group input-group-sm'  name='videoInfo_"+uploadIndex+"' type='file' >");
        $("#videoFile_"+uploadIndex).fileinput({
            language:'zh',  /**默认中文**/
            dropZoneEnabled:false,  /**是否显示拖拽区域**/
            showUpload: false,  /**是否显示批量上传**/
            uploadAsync:true,  /**默认异步上传**/
            showRemove : false, /**显示移除按钮**/
            showPreview : true, /**是否显示预览**/
            showCaption: true,  /**是否显示标题**/
            browseClass: "btn btn-primary",  /**按钮样式**/
            autoReplace: true, /**自动替换**/
            maxFileCount: maxFileCount,  /**表示允许同时上传的最大文件个数**/
            maxFileSize: 1024*50,  /**单位为kb，文件大小为50M，如果为0表示不限制文件大小**/
            enctype: 'multipart/form-data',
            validateInitialCount:true,
            uploadUrl: '${basePath}/back/upload/uploadVideoFile.sjson?subSysFolderName='+subSysFolderName+'&videoInfoPath='+videoInfoPath,  /**上传的地址(访问接口地址)image_phoneCategory**/
            allowedFileExtensions: ['mp4','flv','MP4','FLV'],  /**接收的文件后缀**/
            overwriteInitial: false
        }).on("filebatchselected", function(event, files) { /**已经选择文件未上传回调的事件**/
            /**隐藏整体的上传文件进度条**/
            $(".kv-upload-progress").hide();
            /**隐藏上传文件右上角的 x **/
            $(".fileinput-remove").hide();
            /**自动上传视频**/
            $(this).fileinput("upload");
        }).on("fileuploaded", function(event, data) { /**文件上传成功回调的事件**/
            if(data.response){
                var isSuccess = JSON.parse(data.response.success);
                if(isSuccess){
                    /**从respone中获取resultMsg对象**/
                    var resultMsg = JSON.parse(data.response.data);
                    /**将重新上传的视频路径回写到隐藏域中**/
                    $("#videoUrl_"+uploadIndex).val(resultMsg.videoUrl).change();
                    /**将重新上传的视频大小回写到隐藏域中**/
                    $("#videoSize").val(resultMsg.videoSize).change();
                }else{
                    /**上传失败后，动态添加上传检验并验证失败**/
                    var message = JSON.parse(data.response.msg);
                    showMsg(message);
                }
            }
        }).on('fileimagesloaded', function(event) {
            $("#videoFile_"+uploadIndex).hide();
        }).on("filesuccessremove", function(event, data) { /**移除已上传的文件完成回调的事件**/
        $("#videoFile_"+uploadIndex).show();
            $("#videoUrl_"+uploadIndex).val("").change();
            /**移除上传文件后，动态添加上传检验并验证失败**/
            rebuildValidateField('videoInfo_'+uploadIndex);
            reValidateField('videoInfo_'+uploadIndex);
        }).on("fileremoved", function(event, data) { /**移除已上传的文件完成回调的事件**/
        $("#videoFile_"+uploadIndex).show();
            /**删除原始文件后将隐藏域置空**/
            rebuildValidateField('videoInfo_'+uploadIndex);
            reValidateField('videoInfo_'+uploadIndex);
        });
        reValidateForm();
    }

    /**
     * 修改视频
     */
    function  initVideoForUpdate(uploadIndex,subSysFolderName,videoInfoPath,maxFileCount,visitFileRoot,fileSaveUrl){
        var fileName="";
        if(fileSaveUrl!=undefined&&fileSaveUrl!=""){
            fileName=fileSaveUrl.substring(fileSaveUrl.lastIndexOf("/")+1);
        }else{
            fileName="视频丢失了，请重新上传！";
        }
        $(".container").css("padding","0px 0px 0px 0px").css("width","auto");
        $(".file-drop-zone").css("height","auto");
        $("#fileWrap"+uploadIndex).empty().html("<input id='videoFile_"+uploadIndex+"' value='C://123.jpg' class='file input-group input-group-sm form-control' name='videoInfo_"+uploadIndex+"' type='file'>");
        /**在 ajax中 初始化 fileinput 是配置参数是不起作用的  需要 先销毁，再初始化**/
        $("#videoFile_"+uploadIndex).fileinput('destroy');

        $("#videoFile_"+uploadIndex).fileinput({
            language:'zh',  /**默认中文**/
            uploadAsync:true,  /**默认异步上传**/
            dropZoneEnabled:false,  /**是否显示拖拽区域**/
            showUpload: false,  /**是否显示批量上传**/
            showRemove : false, /**显示移除按钮**/
            showPreview : true, /**是否显示预览**/
            showCaption: true,  /**是否显示标题**/
            browseClass: "btn btn-primary",  /**按钮样式**/
            autoReplace: true,  /**自动替换**/
            maxFileCount: maxFileCount,  /**表示允许同时上传的最大文件个数**/
            maxFileSize: 1024*50, /**单位为kb，文件大小为50M，如果为0表示不限制文件大小**/
            enctype: 'multipart/form-data',
            validateInitialCount:true,
            uploadUrl: '${basePath}/back/upload/uploadVideoFile.sjson?subSysFolderName='+subSysFolderName+'&videoInfoPath='+videoInfoPath, /**上传的地址(访问接口地址)**/
            allowedFileExtensions: ['mp4','flv','MP4','FLV'],  /**接收的文件后缀**/
            overwriteInitial: false,
            initialPreviewAsData: true,
            initialPreviewFileType: 'image',
            //initialPreviewShowDelete:true,
            allowedPreviewTypes: ['video'],
            initialPreview: [
                visitFileRoot+"/"+fileSaveUrl
            ],
            initialPreviewConfig:[
                {type: "video", size: 1024*50, filetype: "video/mp4", caption: "Krajee Sample.mp4", url: '${basePath}/back/upload/deleteFile.sjson?fileStoreUrl='+fileSaveUrl, key: 15}
            ]
        }).on("filebatchselected", function(event, files) {  /**已经选择文件未上传回调的事件**/
            /**隐藏整体的上传文件进度条**/
            $(".kv-upload-progress").hide();
            /**隐藏上传文件右上角的 x **/
            $(".fileinput-remove").hide();
            /**自动上传视频**/
            $(this).fileinput("upload");
        }).on("fileuploaded", function(event, data) { /**文件上传成功回调的事件**/
            if(data.response){
                var isSuccess =JSON.parse(data.response.success);
                if(isSuccess){
                    /**从respone中获取resultMsg对象**/
                    var resultMsg = JSON.parse(data.response.data);
                    /**将重新上传的视频路径回写到隐藏域中**/
                    $("#videoUrl_"+uploadIndex).val(resultMsg.videoUrl).change();
                    /**将重新上传的视频大小回写到隐藏域中**/
                    $("#videoSize").val(resultMsg.videoSize).change();
                }else{
                    /**上传失败后，获取失败信息并展示**/
                    var message = JSON.parse(data.response.msg);
                    showMsg(message);
                }
            }
        }).on('fileimagesloaded', function(event) {
            $("#videoFile_"+uploadIndex).hide();
        }).on("filesuccessremove", function(event, data) { /**移除已上传的文件完成回调的事件**/
        	$("#videoFile_"+uploadIndex).show();
            $("#videoUrl_"+uploadIndex).val("").change();
            /**移除上传文件后，动态添加上传检验并验证失败**/
            rebuildValidateField('videoInfo_'+uploadIndex);
            reValidateField('videoInfo_'+uploadIndex);
        }).on("fileremoved", function(event, data) { /**移除已上传的文件完成回调的事件**/
        	$("#videoFile_"+uploadIndex).show();
            rebuildValidateField('videoInfo_'+uploadIndex);
            reValidateField('videoInfo_'+uploadIndex);
        }).on('filepredelete', function(event, key, jqXHR, data) { /**删除已上传的文件回调的事件**/
        	$("#videoFile_"+uploadIndex).show();
            /**删除原始文件后将隐藏域置空**/
            $("#videoUrl_"+uploadIndex).val("").change();
            rebuildValidateField('videoInfo_'+uploadIndex);
            reValidateField('videoInfo_'+uploadIndex);
        });
        $("#videoFile_"+uploadIndex).hide();
    }

</script>

<!--添加编辑模态框（Modal） -->
<div class="modal fade" id="addOrEditModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
	<div class="modal-dialog" style="width:70%">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				<h5 class="modal-title" id="myModalLabel"></h5>
			</div>
			<div class="modal-body">
				<form id="form1"  method="post" action="${basePath}/back/wx/material/video/saveOrUpdateWxMaterialVideoInfo.sjson">
					<input id="materialVideoInfoId" type="hidden" name="materialVideoInfoId" value=""/>
					<input id="publicNumberId" type="hidden" name="publicNumberId" value=""/>
					<input id="videoThumbUrl" type="hidden" name="videoThumbUrl" value=""/>
					<input id="createTime" type="hidden" name="createTime" value=""/>
					<input id="lastUpdateDate" type="hidden" name="lastUpdateDate" value=""/>
					<input id="creater" type="hidden" name="creater" value=""/>
					<input id="videoMediaId" type="hidden" name="videoMediaId" value=""/>
					<input id="videoFormatEnumId" type="hidden" name="videoFormatEnumId" value=""/>
					<input id="videoSize" type="hidden" name="videoSize" value=""/>
					<input id="infoSendFlag" type="hidden" name="infoSendFlag" value=""/>
					<input id="modifier" type="hidden" name="modifier" value=""/>
					<input id="deletedFlag" type="hidden" name="deletedFlag" value=""/>
					<input id="videoName" type="hidden" name="videoName" value=""/>

					<table align="center" class="addOrEditTable table-bordered table" style="width:100%;">
						<tr>
							<td class="toright_td" width="150px"><span style="color:red">* </span>视频:</td>
							<td class="toleft_td">
								<div class="container">
									<input id="videoUrl_1" type="hidden" name="videoUrl" value=""/>
									<div class="form-group" id="fileWrap1"></div>
								</div>
							</td>
						</tr>

						<tr>
							<td class="toright_td" width="150px"><span style="color:red">* </span>视频标题:&nbsp;&nbsp;</td>
							<td  class="toleft_td">
								<div class="form-group">
									<input type="text" class="form-control input-sm" id="videoTitle" name="videoTitle" placeholder="请输入视频标题"/>
								</div>
							</td>
						</tr>
						<tr>
							<td class="toright_td" width="150px">视频描述:&nbsp;&nbsp;</td>
							<td  class="toleft_td">
								<div class="form-group">
									<textarea class="form-control input-sm" type="text" id="videoDescription" name="videoDescription" placeholder="请输入视频描述"></textarea>
								</div>
							</td>
						</tr>
						<tr>
							<td class="toright_td" width="150px">备注:&nbsp;&nbsp;</td>
							<td  class="toleft_td">
								<div class="form-group">
									<input type="text" class="form-control input-sm" id="remark" name="remark" placeholder="请输入备注"/>
								</div>
							</td>
						</tr>
					</table>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" id="validateBtn" class="btn btn-primary"  onclick="submitForm()">保存</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>